<!--
 * @Author: your name
 * @Date: 2021-08-19 17:18:39
 * @LastEditTime: 2025-09-04 14:46:54
 * @LastEditors: dh
 * @Description: In User Settings Edit
 * @FilePath: \A_demo\CSS\background.html
-->
<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>background</title>
</head>
<!--
    background-clip：规定背景的绘制区域
    background-origin: 规定背景图片的定位区域
    background-size: 规定背景图片的尺寸。
    background-origin ：规定 background-position 属性相对于什么位置来定位。
 -->

<body>
	<style>
		div {
			width: 200px;
			height: 200px;
			padding: 50px;
			background: teal;
			border: 20px solid blue;
			float: left;
			margin: 20px;
		}

		div:nth-of-type(1) {
			border-color: transparent;
			/* 默认 */
			background-clip: border-box;
			/* 从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ */
			background-clip: padding-box;
			/* 只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！ */
			background-clip: content-box;
		}

		div:nth-of-type(2) {
			background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%);
			background-repeat: no-repeat;

			/* 	背景图像相对于边框盒来定位。 */
			background-origin: border-box;
				/* 背景图像相对于内边距框来定位。 */
			background-origin: padding-box;
			/* 	背景图像相对于内容框来定位。 */
			background-origin: content-box;
		}

		div:nth-of-type(3) {
			background-image: url('../assets/img/天空.jpg');
			background-repeat: no-repeat;

			/* 	背景图像等比缩放显示 ，有可能不能填充满盒子 */
			background-size: contain;
			/* 某个方向完全填充，另一个方向裁剪 */
			background-size: cover;
			/* x 和 y 方向大小 */
			background-size: 100px 50%;
		}

		div:nth-of-type(4) {
			background:
				url('../assets/img/荷叶.jpg') no-repeat left top,
				url('../assets/img/天空.jpg') no-repeat right bottom;
			background-size:
				100px 100px,
				100px 100px;
		}
	</style>
	<div class="box">background-clip</div>
	<div class="box">background-origin</div>
	<div class="box">background-size</div>
	<div class="box">多张背景图</div>
</body>

</html>